<template>
  <div id="#app">
    <common-header></common-header>
    <div class="container mt-5">
      <div class="alert text-center" :class="payResult.status?'alert-light':'alert-danger'">
        <i
          class="fas fa-check-circle fa-3x mr-2"
          :class="payResult.status?'text-success':'text-danger'"
        ></i>
        <h5 class="d-inline" style="vertical-align: super;" v-if="payResult.status">恭喜您！购买成功！</h5>
        <h5 class="d-inline" style="vertical-align: super;" v-else>抱歉，无法完成付款！</h5>
        <hr>
        <p>订单编号：{{payResult.orderId}}</p>
        <p v-if="payResult.status">请点击"返回商城"按钮，通知商户支付结果</p>
        <p v-else>账户余额不足！</p>
        <a href="###" class="btn" :class="payResult.status?'btn-primary':'btn-warning disabled'" @click="cancelTimeMethod">{{count}}秒后返回商城</a>
      </div>
    </div>
    <common-footer></common-footer>
  </div>
</template>


<script>
import commonHeader from "./common/header.vue";
import commonFooter from "./common/footer.vue";
export default {
  components: {
    commonHeader,
    commonFooter
  },
  data() {
    return {
      payResult: { status: false, orderId: "" },
      count: 5,
      cancelTime: 0
    };
  },
  beforeRouteEnter(to, from, next) {
    if (to.params.payResult == 1) {
      next(vm => {
        vm.payResult.status = true;
        vm.payResult.orderId = to.params.orderId;
      });
    } else {
      next(vm => {
        vm.payResult.status = false;
        vm.payResult.orderId = to.params.orderId;
      });
    }
  },
  mounted() {
    this.countdown();
  },
  methods: {
    countdown() {
      this.cancelTime = setInterval(() => {
        this.count--;
        if (this.count == 0) {
          clearInterval(this.cancelTime);
          this.$router.push("/");
        }
      }, 1000);
    },
    cancelTimeMethod(){
      clearInterval(this.cancelTime);
      this.$router.push("/");
    }
  }
};
</script>

<style scoped>
</style>
